:root{
  --primary:#663399;
  --error:#ee4866;
  --success:#1ba784;
  --default:#999;
  --inactive: #d0d0d0;
}


#app{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.themes_list{
  display: flex;
}
.themes_item{
  margin-right: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}

.is_disable{
  margin-bottom: 30px;
  transform: translateX(-70px);
}

.radio_list{
  display: flex;
}

.disable_radio{
  margin-right: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}


.switch{
  position: relative;
  width: 80px;
  height: 40px;
  background-color: var(--inactive);
  border-radius: 20px;
  cursor: pointer;
  transition: background .5s ease-out;
}

.disable.switch {
  cursor: not-allowed;
  opacity: .5;
}

.circle{
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #fff;
  animation: slideOff .3s linear forwards;
}

.switch.primary_active{
  background-color: var(--primary);
}

.switch.error_active{
  background-color: var(--error);
}

.switch.success_active{
  background-color: var(--success);
}

.switch.default_active{
  background-color: var(--default);
}

.active .circle{
  animation: slideOn .3s linear forwards;
}

@keyframes slideOn {
  0%{
    transform:translate(0%,-50%) scale(1) ;
  }
  50%{
    transform:translate(50%,-50%) scale(1.2) ;
  }
  100%{
    transform:translate(110%,-50%) scale(1) ;
  }
}


@keyframes slideOff {
  0% {
    transform: translate(110%,-50%) scale(1);
  }
  50% {
    transform: translate(50%,-50%) scale(1.2);
  }
  100% {
    transform: translate(0%,-50%) scale(1);
  }
}
